<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>产品管理</title>
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>


	<!-- 搜索行 -->
	<form class="layui-form">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">名字</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="name" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">范围</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="minPrice" placeholder="￥"
						autocomplete="off" class="layui-input">
				</div>
				<div class="layui-form-mid">-</div>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="maxPrice" placeholder="￥"
						autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label">类型</label>
				<div class="layui-input-inline" style="width: 100px;">
					<select name="productTypeId" class="proType">
						<option value="">--请选择--</option>
					</select>
				</div>
			</div>
			<button class="layui-btn" lay-submit lay-filter="souBtn">搜索</button>
		</div>
	</form>
	<nav>
		<a href="../HomeServlet?method=toIndex">返回首页</a>
	</nav>
	<table id="demo" lay-filter="test"></table>
	<!--头部工具栏  -->
	<script type="text/html" id="toolbarDemo1">
       <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
       </div>
</script>
	<!-- 行内工具栏 -->
	<script type="text/html" id="toolbarDemo2">
       <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
          <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
    <button class="layui-btn layui-btn-sm" lay-event="tu">图片</button>
       </div>
      
</script>
	<!-- 添加表单 -->

	<div id="addDiv" style="display: none;">
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<label class="layui-form-label">商品名称</label>
				<div class="layui-input-inline">
					<input type="text" name="name" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">风格</label>
				<div class="layui-input-inline">
					<input type="text" name="style" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">品牌</label>
				<div class="layui-input-inline">
					<input type="text" name="Brand" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">价格</label>
				<div class="layui-input-inline">
					<input type="text" name="Price" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">材质</label>
				<div class="layui-input-inline">
					<input type="text" name="meterial" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">地址</label>
				<div class="layui-input-inline">

					<input type="text" name="diZhi" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">系列</label>
				<div class="layui-input-inline">

					<select name="productTypeId" class="proType">
						<option value="">--请选择--</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">图片</label>
				<div class="layui-input-inline">
					<button type="button" class="layui-btn" id="test1">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
					<img id="showImg" style="width: 100px" src=""> <input
						type="text" name="proUrl" id="Url" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off"
						class="layui-input layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">是否展示</label>
				<div class="layui-input-block">
					<input type="radio" name="isShowHome" value="是" title="是">
					<input type="radio" name="isShowHome" value="否" title="否" checked>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">市场价格</label>
				<div class="layui-input-inline">
					<input type="text" name="sPrice" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!-- 编辑信息 -->
	<div id="complieDiv" style="display: none;">
		<form class="layui-form" action="" lay-filter="updateform">
			<div class="layui-form-item">
				<label class="layui-form-label">ID</label>
				<div class="layui-input-inline">
					<input type="text" name="proid" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off"
						class="layui-input layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品名称</label>
				<div class="layui-input-inline">
					<input type="text" name="name" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">风格</label>
				<div class="layui-input-inline">
					<input type="text" name="style" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">品牌</label>
				<div class="layui-input-inline">
					<input type="text" name="Brand" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">价格</label>
				<div class="layui-input-inline">
					<input type="text" name="Price" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">材质</label>
				<div class="layui-input-inline">
					<input type="text" name="meterial" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">地址</label>
				<div class="layui-input-inline">

					<input type="text" name="diZhi" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">系列</label>
				<div class="layui-input-inline">
					<select name="productTypeId" class="proType">
						<option value="">--请选择--</option>
					</select>

				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">图片</label>
				<div class="layui-input-inline">
					<button type="button" class="layui-btn" id="test2">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
					<img id="showImg2" style="width: 100px" src=""> <input
						type="text" name="proUrl" id="Url2" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off"
						class="layui-input layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">是否展示</label>
				<div class="layui-input-block">
					<input type="radio" name="isShowHome" value="是" title="是">
					<input type="radio" name="isShowHome" value="否" title="否" checked>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">市场价格</label>
				<div class="layui-input-inline">
					<input type="text" name="sPrice" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo1">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!-- 详情图div -->
	<div id="tuDiv" style="display:none">
	<table id="demo2" lay-filter="tutab"></table>
	</div>
	<!--头部工具栏  -->
	
    
    <!-- 添加的表单 -->
    <!-- 添加表单 -->

	<div id="addDiv3" style="display: none;">
		<form class="layui-form" action="">
			
			<div class="layui-form-item">
             <label class="layui-form-label">产品id</label>
             <div class="layui-input-inline">
              <input type="text" name="productid"  id="productimgid" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input  layui-disabled">
               </div>
             </div>
			<div class="layui-form-item">
				<label class="layui-form-label">图片</label>
				<div class="layui-input-inline">
					<button type="button" class="layui-btn" id="test3">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
					<img id="showImg3" style="width: 100px" src=""> <input
						type="text" name="imgurl" id="Url3" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off"
						class="layui-input layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">ok 
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo3">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
    
    <!-- 图片编辑表单 -->
   
    <script type="text/html" id="toolbarDemo3">
       <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="deleteimg">删除</button>
          <button class="layui-btn layui-btn-sm" lay-event="updateimg">编辑</button>
       </div>
      
</script>
<!-- 编辑信息 -->
 <div id="complieDiv4" style="display:none;">
     <form class="layui-form" action="" lay-filter="updateform"> 
     <div class="layui-form-item">
    <label class="layui-form-label">ID</label>
    <div class="layui-input-inline">
      <input type="text" name="imgid" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input layui-disabled">
    </div>
  </div>
  <form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">图片</label>
    <div class="layui-input-inline">
     <button type="button" class="layui-btn" id="test4">
       <i class="layui-icon">&#xe67c;</i>上传图片
      </button>
      <img id="showImg4" style="width: 100px" src="">
    <input type="text" name="imgurl" id="Url4" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input layui-disabled">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">系列id</label>
    <div class="layui-input-inline">
      <input type="text" name="productid" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">图片名称</label>
    <div class="layui-input-inline">
        <input type="text" name="imgname" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo4">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</div> 
	<!-- 单独图片信息结束 -->
	<script>
		layui
				.use(
						[ 'table', 'form', 'layer', 'upload' ],
						function() {
							var table = layui.table;
							var $ = layui.$;
							var form = layui.form;
							var upload = layui.upload;

							//第一个实例
							table
									.render({
										elem : '#demo',
										url : 'ChanPinDuctServletadmin?method=getProList' //数据接口
										,
										page : true //开启分页
										,
										method : 'post',
										toolbar : '#toolbarDemo1',
										id : 'idTest',
										cols : [ [ //表头
												{
													field : 'proid',
													title : 'ID',
													width : 80,
													sort : true,
													fixed : 'left'
												},
												{
													field : 'name',
													title : '商品名称',
													width : 100
												},
												{
													field : 'style',
													title : '风格',
													width : 80
												},
												{
													field : 'Brand',
													title : '品牌',
													width : 77
												},
												{
													field : 'Price',
													title : '价格',
													width : 80
												},
												{
													field : 'meterial',
													title : '材质',
													width : 80,
													sort : true
												},
												{
													field : 'diZhi',
													title : '地址',
													width : 80
												},
												{
													field : 'proUrl',
													title : '图片',
													width : 180,
													templet : function(d) {
														return '<img src="../'+d.proUrl+'"/>'
													}
												}, {
													field : 'isShowHome',
													title : '是否展示',
													width : 80
												}, {
													field : 'sPrice',
													title : '市场价格',
													width : 80
												}, {
													field : 'productTypeId',
													title : '系列',
													width : 135,
													sort : true
												}, {
													field : 'sPric',
													title : '操作',
													toolbar : '#toolbarDemo2',
													width : 200
												} ] ]
									});//表单渲染结束

							//监听事件,头部监听
							table.on('toolbar(test)', function(obj) {
								switch (obj.event) {
								case 'add':
									layer.open({
										type : 1,
										content : $('#addDiv')
									//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
									});
									break;
								}
								;
							});
							//监听事件，行内监听
							table
									.on(
											'tool(test)',
											function(obj) {
												var data = obj.data;
												switch (obj.event) {
												case 'delete':
													layer.msg('删除');
													layer
															.confirm(
																	'真的删除行么',
																	function(
																			index) {
																		obj
																				.del(); //删除对应行（tr）的DOM结构，并更新缓存
																		layer
																				.close(index);
																		//向服务端发送删除指令
																		$
																				.post(
																						"ChanPinDuctServletadmin?method=deleteproduct",
																						{
																							"proid" : data.proid
																						},
																						function(
																								res) {
																							layer
																									.msg(res.msg);
																						},
																						"json")
																	});
													break;
												case 'update':
													layer
															.open({
																type : 1,
																content : $('#complieDiv')
															//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
															});
													form
															.val("updateform",
																	data)
													$("#showImg2")
															.attr(
																	"src",
																	"../"
																			+ data.proUrl);
													break;
												//图片跳转详情
												case 'tu':
													$("#productimgid").val(data.proid);
													layer.open({
														type : 1,
														content : $('#tuDiv')
													});

													//数据渲染
													table.render({
														elem : '#demo2',
														url : 'ChanPinImgServletadmin?method=getProImgList&pid='+data.proid //数据接口
														,id:"idTest2",
														page : true //开启分页
														,
														method:'post',
														toolbar : '#toolbarDemo1',
														cols : [ [ //表头
														{
															field : 'imgid',
															title : 'ID',
															width : 80,
															sort : true,
															fixed : 'left'
														}, {
															field : 'imgurl',
															title : '图片',
															width : 180,
															templet : function(d) {
																return '<img src="../'+d.imgurl+'"/>'
															}
														},{
															field : 'cao',
															title : '操作',
															width : 180,
															toolbar:'#toolbarDemo3'
														}] ]
													});//表单渲染结束
																
																break;
												}
												;
											});
							/* 单独图片开始 */
							//添加按钮
		  table.on('toolbar(tutab)', function(obj){
              switch(obj.event){
              case 'add':
              	  layer.open({
    	        	  type: 1,
    	              area : [ '500px', '600px' ],
    	              content: $('#addDiv3') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
    		});
                break;
                };
                 });
		     //添加图片
			form.on('submit(formDemo3)', function(data) {
					$.post("ChanPinImgServletadmin?method=insertimg",
							data.field, function(res) {
								if (res.code == 0) {
									layer.msg(res.msg, {
										time : 1000
									}, function() {
										layer.closeAll();//成功后关闭
										table.reload('idTest2', {});//表格重载
									})
								}
							}, "json")
					return false;
				});
			//添加上传图片
			var uploadInst = upload.render({
	    elem: '#test3' //绑定元素
	    ,url: 'ImgServletAdmin?method=upload' //上传接口
	    ,done: function(res){
	      //上传完毕回调
	      if(res.code==0){
	    	  $("#showImg3").attr("src","../images/"+res.data);
	    	  $("#Url3").val("images/"+res.data);
	      }
	    }
	    ,error: function(){
	      //请求异常回调
	    }
	  });
			
		
		//监听事件，行内监听
		  table.on('tool(tutab)', function(obj){
		     var data=obj.data;
		    switch(obj.event){
		      case 'deleteimg':
		        layer.msg('删除');layer.confirm('真的删除行么', function(index){
		            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
		            layer.close(index);
		            //向服务端发送删除指令
		            $.post("ChanPinImgServletadmin?method=deleteproductimg",{"imgid":data.imgid},function(res){
		            	layer.msg(res.msg);
		            },"json")
		          });
		      break;
		      case 'updateimg':
		    	  layer.open({
		    		  type: 1,
		    		  area : [ '500px', '600px' ],
		    		  content: $('#complieDiv4') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		    		});
		    	  form.val("updateform",data)
		   	      $("#showImg4").attr("src","../"+data.imgurl);
		      break;
		    };
		  });
		//监听表单-编辑
		  form.on('submit(formDemo4)', function(data){
			   
			  $.post("ChanPinImgServletadmin?method=updateproduct",data.field,function(res){
				  if(res.code==0){
					  layer.msg(res.msg,{time:1000},function(){
						  layer.closeAll();//成功后关闭
						  table.reload('idTest2', {});//表格重载
					  })
				  }
			  },"json")
			    return false;
			  });
		  //执行实例
		  var uploadInst = upload.render({
			    elem: '#test4' //绑定元素
			    ,url: 'ImgServletAdmin?method=upload' //上传接口
			    ,done: function(res){
			      //上传完毕回调
			      if(res.code==0){
			    	  $("#showImg4").attr("src","../images/"+res.data);
			    	  $("#Url4").val("images/"+res.data);
			      }
			    }
			    ,error: function(){
			      //请求异常回调
			    }
			  });
		
	  
							/* 单独图片结束 */
							//监听表单-添加
							form
									.on(
											'submit(formDemo)',
											function(data) {
												$
														.post(
																"ChanPinDuctServletadmin?method=insertproduct",
																data.field,
																function(res) {
																	if (res.code == 0) {
																		layer
																				.msg(
																						res.msg,
																						{
																							time : 1000
																						},
																						function() {
																							layer
																									.closeAll();//成功后关闭
																							table
																									.reload(
																											'idTest',
																											{});//表格重载
																						})
																	}
																}, "json")
												return false;
											});
							//上传图片--添加时上传图片
							//执行实例
							var uploadInst = upload.render({
								elem : '#test1' //绑定元素
								,
								url : 'ImgServletAdmin?method=upload' //上传接口
								,
								done : function(res) {
									//上传完毕回调
									if (res.code == 0) {
										$("#showImg").attr("src",
												"../images/" + res.data);
										$("#Url").val("images/" + res.data);
									}
								},
								error : function() {
									//请求异常回调
								}
							});
							//监听表单-编辑
							form.on(
											'submit(formDemo1)',
											function(data) {

												$.post(
																"ChanPinDuctServletadmin?method=updateproduct",
																data.field,
																function(res) {
																	if (res.code == 0) {
																		layer
																				.msg(
																						res.msg,
																						{
																							time : 1000
																						},
																						function() {
																							layer
																									.closeAll();//成功后关闭
																							table
																									.reload(
																											'idTest',
																											{});//表格重载
																						})
																	}
																}, "json")
												return false;
											});
							//上传图片--编辑时上传图片
							//执行实例
							var uploadInst = upload.render({
								elem : '#test2' //绑定元素
								,
								url : 'ImgServletAdmin?method=upload' //上传接口
								,
								done : function(res) {
									//上传完毕回调
									console.log(res)
									if (res.code == 0) {
										$("#showImg2").attr("src",
												"../images/" + res.data);
										$("#Url2").val("images/" + res.data);
									}
								},
								error : function() {
									//请求异常回调
								}
							});
							//监听提交--搜索
							form.on('submit(souBtn)', function(data) {
								table.reload('idTest', {
									where : data.field
								});
								return false;
							});
							//异步
							$
									.post(
											"ChanPinDuctServletadmin?method=getProTypeList",
											function(res) {
												/* console.log(res); */
												if (res.code == 0) {
													for (var i = 0; i < res.data.length; i++) {
														$(".proType")
																.append(
																		"<option value='"+res.data[i].typeId+"'>"
																				+ res.data[i].typeName
																				+ "</option>")
													}
													form.render('select');
												}
											}, "json")
						});//结束
	</script>

</body>
</html>